<template>
  <div class="count">
    <!-- 数量统计 -->
    <PagePanel :panelTitle="activePanel.panelTitle" @clickClose="clickClose">
      <LittleTitle>大类种类数量统计</LittleTitle>
      <div id="total"></div>
      <LittleTitle>中类种类数量统计</LittleTitle>
      <div id="pie1"></div>
      <LittleTitle>小类种类数量统计</LittleTitle>
      <div id="pie2"></div>
    </PagePanel>
  </div>
</template>

<script>
import * as echarts from "echarts";
import PagePanel from "@/components/PagePanel";
import LittleTitle from "@/components/LittleTitle";
import { statistic_l1, statistic_l2, statistic_l3 } from "@/api/stat.js";

export default {
  name: "CountAnalyse",
  components: { PagePanel, LittleTitle },
  data() {
    return {};
  },
  computed: {
    activePanel() {
      return this.$store.state.activePanel;
    },
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      this.initTotalEchart();
      //this.initPieEchart();
      this.initPieEchart1();
      this.initPieEchart2();
    },
    initPieEchart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("pie"));
      // 绘制图表
      myChart.setOption({
        backgroundColor: '#409eff20', //'#00176320',
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      });
    },
    //初始化中类
    async initPieEchart1() {
      const res2 = await statistic_l2();
      const data2 = JSON.parse(res2.data);
      const legendData = [];
      const seriesData = [];
      data2.forEach((item) => {
        if (item.TypeName) {
          legendData.push(item.TypeName);
          seriesData.push({
            name: item.TypeName,
            value: item.count,
          });
        }
      });

      const data = {
        legendData: legendData, //name
        seriesData: seriesData, //{ name, value}
      };

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("pie1"));

      // 绘制图表
      myChart.setOption({
        // backgroundColor: "rgba(128,128,128,0.1)",
        // backgroundColor: '#409eff20', //'#00176320',
        // title: {
        //   text: "中类种类数量统计",
        //   left: "center",
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // legend: {
        //   type: "scroll",
        //   orient: "vertical",
        //   right: 0,
        //   top: 20,
        //   bottom: 20,
        //   data: data.legendData,
        // },
        series: [
          {
            name: "类名",
            type: "pie",
            radius: "80%",
            center: ["50%", "50%"],
            data: data.seriesData,
            //控制label和线的显示
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0, 0, 0, 0.5)",
            //   },
            // },
          },
        ],
      });
    },
    //初始化小类
    async initPieEchart2() {
      const res2 = await statistic_l3();
      const data2 = JSON.parse(res2.data);
      const legendData = [];
      const seriesData = [];
      data2.forEach((item) => {
        if (item.TypeName) {
          legendData.push(item.TypeName);
          seriesData.push({
            name: item.TypeName,
            value: item.count,
          });
        }
      });

      const data = {
        legendData: legendData, //name
        seriesData: seriesData, //{ name, value}
      };

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("pie2"));

      // 绘制图表
      myChart.setOption({
        // backgroundColor: "rgba(128,128,128,0.1)",
        // backgroundColor: '#409eff20', //'#00176320',
        // title: {
        //   text: "小类种类数量统计",
        //   left: "center",
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // legend: {
        //   type: "scroll",
        //   orient: "vertical",
        //   right: 0,
        //   top: 20,
        //   bottom: 20,
        //   data: data.legendData,
        // },
        series: [
          {
            name: "类名",
            type: "pie",
            radius: "80%",
            center: ["50%", "50%"],
            data: data.seriesData,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0, 0, 0, 0.5)",
            //   },
            // },
          },
        ],
      });
    },

    async initTotalEchart() {
      const res = await statistic_l1();
      const data = JSON.parse(res.data);

      let typeName = [];
      let count = [];

      data.forEach((item) => {
        if (item.TypeName) {
          typeName.push(item.TypeName);
          count.push(item.count);
        }
      });

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("total"));
      // 绘制图表
      myChart.setOption({
        // title: {
        //   text: "大类种类数量统计",
        //   left: "center",
        // },
        // backgroundColor: "rgba(128,128,128,0.1)",
        // backgroundColor: '#409eff20', //'#00176320',
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: typeName,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            formatter: function (params) {
              var newParamsName = ""; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 2; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName;
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: count,
            type: "bar",
          },
        ],
      });
    },
    clickClose() {
      console.log("@@@@@@@@@@@@", this.activePanel);
    },
  },
  beforeDestroy() {
    //因为面板都是用的v-if，会销毁面板，需要销毁的事件也可以写这里
  },
};
</script>
<style lang="less" scoped>
.count {
  height: 100%;
  ::v-deep .page-panel {
    width: 400px;
    height: 100%;
    background-color: '#409eff20';
    .content {
      height: calc(100% - 46px);
      overflow: auto;
    }
  }
}

#total {
  width: 354px;
  height: 400px;
}
#pie {
  width: 354px;
  height: 300px;
}
#pie1 {
  width: 354px;
  height: 354px;
}
#pie2 {
  width: 354px;
  height: 354px;
}
</style>
